<template>
	<view class="content">
		<view class="top_kong"></view>
		<view class="top_box">
			<image src="../../static/image/ico_dh_bk@2x.png" @click="goBack"></image>
			<!-- <view class="top_box_right">注册</view> -->
		</view>
		<view class="login_box">
			<view class="login_title">忘记密码</view>
			<view class="tabber_box">
				<view class="tabber_item" @click='clickbtn(1)' :class="{'chooseactive':typeindex==1}">
					<view>手机找回 </view>
					<view class="title_line" v-show="typeindex==1"></view>
				</view>
				<view class="tabber_item" @click='clickbtn(2)' :class="{'chooseactive':typeindex==2}">
					<view>邮箱找回 </view>
					<view class="title_line" v-show="typeindex==2"></view>
				</view>
			</view>
			<view class="login_input_box" v-show="typeindex==1">
				<view class="login_input_item">
					<input type="text" value="" placeholder="请输入手机号" placeholder-class="input_class" v-model="mobile" @input="MinputEvent" />
					<image class="clear_btn" src="../../static/image/ico_gb@2x.png" mode="" v-show="showclear" @click="clearMobile"></image>
				</view>
				<view class="login_input_item">
					<input type="text" value="" placeholder="请输入验证码" placeholder-class="input_class" v-model="code" @input="PinputEvent" />
					<view class="input_box_r">
						<view class="code_btn" v-if="showyanz" @click="getcode" :class="{'activegetcode':mobile}">获取验证码</view>
						<view v-else class='code_btn '>{{time}}S后重发</view>
					</view>
				</view>
				<view class="login_input_item">
					<input type="text" value="" placeholder="请设置6~16位密码" placeholder-class="input_class" v-model="password" @input="PinputEvent"
					 v-show="seeStatus" />
					<input type="text" value="" password placeholder="请设置6~16位密码" placeholder-class="input_class" v-model="password"
					 @input="PinputEvent" v-show="!seeStatus" />
					<view class="input_box_r" v-show="showclear1">
						<image class="clear_btn" src="../../static/image/ico_gb@2x.png" mode="" @click="clearPsd"></image>
						<image class="see_btn" src="../../static/image/ico_zy@2x.png" mode="" @click="showSee" v-show="seeStatus"></image>
						<image class="see_btn1" src="../../static/image/ico_zy@2x(1).png" mode="" @click="showSee" v-show="!seeStatus"></image>
					</view>
				</view>
			</view>
			<view class="login_input_box" v-show="typeindex==2">
				<view class="login_input_item">
					<input type="text" value="" placeholder="请输入邮箱地址" placeholder-class="input_class" v-model="email" @input="EinputEvent" />
					<image class="clear_btn" src="../../static/image/ico_gb@2x.png" mode="" v-show="showclear2" @click="clearemail"></image>
				</view>
				<view class="login_input_item">
					<input type="text" value="" placeholder="请输入验证码" placeholder-class="input_class" v-model="code" @input="PinputEvent" />
					<view class="input_box_r">
						<view class="code_btn" v-if="showyanz" @click="getcode">获取验证码</view>
						<view v-else class='code_btn '>{{time}}S后重发</view>
					</view>
				</view>
				<view class="login_input_item">
					<input type="text" value="" placeholder="请设置6~16位密码" placeholder-class="input_class" v-model="password" @input="PinputEvent"
					 v-show="seeStatus" />
					<input type="text" value="" password placeholder="请设置6~16位密码" placeholder-class="input_class" v-model="password"
					 @input="PinputEvent" v-show="!seeStatus" />
					<view class="input_box_r" v-show="showclear1">
						<image class="clear_btn" src="../../static/image/ico_gb@2x.png" mode="" @click="clearPsd"></image>
						<image class="see_btn" src="../../static/image/ico_zy@2x.png" mode="" @click="showSee" v-show="seeStatus"></image>
						<image class="see_btn1" src="../../static/image/ico_zy@2x(1).png" mode="" @click="showSee" v-show="!seeStatus"></image>
					</view>
				</view>
			</view>
			<view class="login_btn1" v-if="showclear==true&&showclear1==true||showclear2==true" @click="goWan">完成</view>
			<view class="login_btn" v-else>完成</view>
		</view>
	</view>
</template>

<script>
	import {sendSMS,sendEms} from '@/api/personal.js'
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				email: '',
				code: '',
				showclear: false,
				showclear1: false,
				showclear2: false,
				seeStatus: false,
				remember: false,
				showyanz: true,
				time: 60,
				typeindex: 1,
				type: ''
			}
		},
		methods: {
			MinputEvent() {
				if (this.mobile != '') {
					this.showclear = true
				} else {
					this.showclear = false
				}
			},
			EinputEvent() {
				if (this.email != '') {
					this.showclear2 = true
				} else {
					this.showclear2 = false
				}
			},
			PinputEvent() {
				if (this.password != '') {
					this.showclear1 = true
				} else {
					this.showclear1 = false
				}
			},
			showSee() {
				this.seeStatus = !this.seeStatus
			},
			chooseJz() {
				this.remember = !this.remember
			},
			getcode() {
				if (this.typeindex == 1) {
					if (/^1[345789]\d{9}$/.test(this.mobile)) {
						let obj = {
							mobile: this.mobile
						}
						sendSMS(obj).then(res => {
							if (res.code == 1) {
								this.$msg(res.msg)
							}
						})
						this.showyanz = false
						let timer = setInterval(() => {
							if (this.time > 0) {
								this.time--

							} else {
								this.showyanz = true
								this.time = 60
								clearInterval(timer)
							}
						}, 1000)
					} else {
						this.$msg('请输入正确手机号')
					}
				} else {
					let obj = {
						email: this.email
					}
					sendEms(obj).then(res => {
						if (res.code == 1) {
							this.$msg(res.msg)
						}
					})
					this.showyanz = false
					let timer = setInterval(() => {
						if (this.time > 0) {
							this.time--
					
						} else {
							this.showyanz = true
							this.time = 60
							clearInterval(timer)
						}
					}, 1000)
				}
			},
			goWan() {
				if (this.typeindex == 1) {
					this.type = 'mobile'
				} else {
					this.type = 'email'
				}
				let obj = {
					mobile: this.mobile,
					email: this.email,
					newpassword: this.password,
					captcha: this.code,
					type: this.type
				}
				resetpwd(obj).then(res => {
					if (res.code == 1) {
						this.$msg(res.msg)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 800)
					}
				})
			},
			clearMobile() {
				this.mobile = ''
			},
			clearPsd() {
				this.password = ''
			},
			clickbtn(val) {
				this.typeindex = val
				this.code=''
				this.password=''
			},
			clearemail() {
				this.email = ''
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.top_kong {
		width: 100%;
		height: var(--status-bar-height);
	}

	.top_box {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}

	.top_box image {
		width: 20rpx;
		height: 36rpx;
	}

	.top_box_right {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.login_box {
		width: 100%;
		margin-top: 10%;
		height: 750rpx;
	}

	.login_title {
		width: 80%;
		margin: auto;
		font-size: 44rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.login_input_box {
		width: 80%;
		height: 300rpx;
		margin: 0 auto;
		/* margin-top: 40rpx; */
	}

	.login_input_item {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #E5E5E5;
		justify-content: space-between;
	}

	.input_class {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	input {
		width: 80%;
	}

	.login_btn {
		width: 80%;
		height: 88rpx;
		margin: auto;
		background: #DDDDDD;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}

	.login_btn1 {
		width: 80%;
		height: 88rpx;
		margin: auto;
		background: linear-gradient(90deg, #FFDD47, #FCB630);
		border-radius: 10rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}

	.login_other_box {
		width: 80%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
	}

	.login_other_l image {
		width: 26rpx;
		height: 26rpx;
	}

	.login_other_r {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.btm_box {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		position: absolute;
		bottom: 40rpx;
	}

	.xy_color {
		font-size: 22rpx;
		color: #333333;
	}

	.clear_btn {
		width: 26rpx;
		height: 26rpx;
	}

	.see_btn {
		width: 26rpx;
		height: 18rpx;
		margin-left: 20rpx;
	}

	.see_btn1 {
		width: 26rpx;
		height: 16rpx;
		margin-left: 20rpx;
	}

	.code_btn {
		width: 130rpx;
		height: 50rpx;
		border: 1rpx solid #DDDDDD;
		border-radius: 6rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.tabber_box {
		width: 60%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: auto;
		margin-top: 50rpx;
	}

	.tabber_item {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.chooseactive {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.title_line {
		width: 60rpx;
		height: 4rpx;
		background: #FFDD47;
		border-radius: 2rpx;
		margin-top: 5rpx;
	}

	.activegetcode {
		color: #303030;
		border: 1rpx solid #303030;
	}
</style>
